<template>
	<view class="logs-container">
		<view class="filter-bar">
			<picker mode="selector" :range="deviceList" range-key="name" @change="handleDeviceChange">
				<view class="picker">
					<text>设备：</text>
					<text>{{currentDevice ? currentDevice.name : '全部'}}</text>
				</view>
			</picker>
			<picker mode="selector" :range="logLevels" @change="handleLevelChange">
				<view class="picker">
					<text>级别：</text>
					<text>{{currentLevel || '全部'}}</text>
				</view>
			</picker>
		</view>

		<view class="log-list">
			<view class="log-item" v-for="(log, index) in logs" :key="index"
				:class="{'warning': log.level === 'warning', 'error': log.level === 'error'}">
				<view class="log-header">
					<text class="device-name">{{log.deviceName}}</text>
					<text class="log-time">{{log.time}}</text>
				</view>
				<view class="log-content">
					<text class="log-level">{{log.level}}</text>
					<text class="log-message">{{log.message}}</text>
				</view>
			</view>
		</view>

		<!-- 无数据提示 -->
		<view class="empty-tip" v-if="logs.length === 0">
			<text>暂无日志数据</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			deviceList: [
				{ id: 1, name: '客厅空调' },
				{ id: 2, name: '卧室灯' }
			],
			logLevels: ['全部', 'info', 'warning', 'error'],
			currentDevice: null,
			currentLevel: '全部',
			logs: [
				{
					id: 1,
					deviceId: 1,
					deviceName: '客厅空调',
					level: 'warning',
					message: '温度过高，建议检查设备',
					time: '2024-03-14 14:30:00'
				},
				{
					id: 2,
					deviceId: 2,
					deviceName: '卧室灯',
					level: 'error',
					message: '设备离线，请检查网络连接',
					time: '2024-03-14 14:25:00'
				}
			]
		}
	},
	methods: {
		handleDeviceChange(e) {
			const index = e.detail.value
			this.currentDevice = index === 0 ? null : this.deviceList[index]
			this.loadLogs()
		},
		handleLevelChange(e) {
			const index = e.detail.value
			this.currentLevel = this.logLevels[index]
			this.loadLogs()
		},
		loadLogs() {
			// TODO: 实现日志加载逻辑
			console.log('加载日志，设备:', this.currentDevice, '级别:', this.currentLevel)
		},
		// 检查异常并发送通知
		checkAbnormal(log) {
			if (log.level === 'error' || log.level === 'warning') {
				uni.requestSubscribeMessage({
					tmplIds: ['your_template_id'], // 需要替换为您的消息模板ID
					success: (res) => {
						console.log('订阅消息成功', res)
						// 发送通知
						this.sendNotification(log)
					}
				})
			}
		},
		// 发送通知
		sendNotification(log) {
			// TODO: 实现推送通知逻辑
			uni.showToast({
				title: `${log.deviceName}发生异常：${log.message}`,
				icon: 'none',
				duration: 3000
			})
		}
	},
	onShow() {
		this.loadLogs()
	},
	// 监听实时日志
	mounted() {
		// TODO: 实现WebSocket连接，监听实时日志
		// 示例：当收到新日志时
		// this.checkAbnormal(newLog)
	}
}
</script>

<style lang="scss">
.logs-container {
	padding: 20rpx;
	
	.filter-bar {
		display: flex;
		justify-content: space-around;
		padding: 20rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		
		.picker {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			
			text:first-child {
				color: #666;
				margin-right: 10rpx;
			}
		}
	}
	
	.log-list {
		.log-item {
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			
			&.warning {
				border-left: 8rpx solid #faad14;
			}
			
			&.error {
				border-left: 8rpx solid #ff4d4f;
			}
			
			.log-header {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10rpx;
				
				.device-name {
					font-size: 28rpx;
					font-weight: bold;
				}
				
				.log-time {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.log-content {
				.log-level {
					display: inline-block;
					padding: 4rpx 12rpx;
					border-radius: 10rpx;
					font-size: 24rpx;
					margin-right: 10rpx;
					
					.warning & {
						background: #fff7e6;
						color: #faad14;
					}
					
					.error & {
						background: #fff1f0;
						color: #ff4d4f;
					}
				}
				
				.log-message {
					font-size: 26rpx;
					color: #333;
				}
			}
		}
	}
	
	.empty-tip {
		text-align: center;
		padding: 100rpx 0;
		color: #999;
		font-size: 28rpx;
	}
}
</style> 